こちらの記事では、Twitter Cards（ツイッターカード）を設置する方法をご紹介します。知っていながらまだ設定されていない方も多いのではないでしょうか？意外と簡単に設定できますので今回の記事を参考に設定してみてください。
目次
Twitter Cardsとは
Twitter Cardsとは、Twitter（X）でリンクをシェアするときに、リンク先の情報を綺麗なプレビューカードとして表示する仕組みです。Twitter Cardsを設定すると、ウェブページの画像やタイトル・説明文等を、通常のツイートよりも目立たせることができます。
新しいWordPressテーマをリリースしました。
今回は企業様の求人採用サイト！https://t.co/GFM5Mg1msp
— WordPressテーマTCD (@tcd_jp) March 28, 2024
一方、次の画像は、Twitter Cardsが設定されていない例です。
設定の有無でかなり印象が変わりますね。タイムラインに流れてきた時の目立ち方が雲泥の差です。しっかりとユーザーの目に留まるように、ぜひTwitter Cardsを設定しておきましょう。
Twitter Cardsの設定に必要なOGP
Twitter Cardsを設定するにあたり
1. SNSサービス共通のOGP
2. Twitter Cards表示用のOGP
の二種類のOGPが必要です。
1. SNSサービス共通のOGP
OGPは、ウェブページの情報をシェアするときに使われる専用のコードです。ウェブページのタイトルや説明、そして表示したい画像を設定できます。
これにより、FacebookやTwitter（X）などのソーシャルメディアでそのページを共有するときに、きれいなプレビューカードが表示されるようになります。
代表的なOGPのmetaタグを紹介します。
<meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="画像のURL"> <meta property="og:url" content="ページのURL">
2. Twitter Cards表示用のOGP
SNSサービス共通のOGP設定の他に、Twitter（X）固有の設定ができる、Twitter Cards表示用のOGP設定もあります。設定をすると、Twitter（X）上でより目立たせることができます。
代表的なTwitter Cards表示用のOGP設定を紹介します。
「Twitter Cards」のカードの種類
<meta name="twitter:card" content="summary">
表示したいカードの種類を記載します。サマリーカードの場合は”summary“、大型画像付きサマリーカードの場合は”summary_large_image”と指定します。
Twitter（X）のユーザー名
<meta name="twitter:card" content="summary">
Webサイトを使用しているTwitter（X）のユーザー名を指定します。Twitter（X）のユーザー名は、ご自身のアカウントIDをご記入ください。
Twitter Cardsの設定方法
こちらでは、Twitter Cardsの設定方法を説明します。Twitter Cardsの設置するには、以下の方法があります。
1. HTMLでmetaタグを挿入する
2. TCDテーマの機能を利用する
3. プラグインを利用する
1. HTMLでmetaタグを挿入する
タグ内にOGP用のmetaタグを挿入することで、Twitter Cardsの設定ができます。
あくまで一例となりますが、SNSサービス共通のOGP設定と、Twitter Cards表示用のOGP設定をあわせたmetaタグはこちらです。
<meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="画像のURL"> <meta property="og:url" content="ページのURL"> <meta name="twitter:site" content="@Twitterのユーザー名"> <meta name="twitter:card" content="summary">
2.TCDテーマの機能を利用する
TCDテーマのFacebook OGP/Twitter Cards設定機能では、テーマオプションからTwitter（X）アカウント名を設定するだけで、OGP設定が簡単にできます。
スクリーンショットは2024年4月時点でのGENESISの管理画面になります。
FacebookアプリID（app_id）に関しては、こちらの記事をご覧ください。
WebサイトとFacebookを連携させる際などに必要となるFacebookアプリID（app_id）。 以前当記事では、OGPの設定にアプリIDの取得が必須とご案内しておりましたが、現在はアプリID無しでもOGP画像は正常に表示されます（サイト側で設定は必要）。 ただし、WordPre...
3. プラグインを利用する
「All in One SEO」や「Yoast SEO」などのプラグインを利用して、OGP設定をする方法もございます。
なお、プラグインの設定により、meta descriptionタグなどのタグの重複が発生する場合があります。
弊社テーマにおいてプラグインの設定を優先したい場合は、下記記事を参考にカスタマイズをお願いします。
Q.「All in one SEO pack」を使うとメタタグが重複する？記事ごとににmetaタグ、metaディスクリプションを設定する機能がありますが、プラグインの「All in one SEO pack」を入れると、それらは重複しま...
Twitter Cardsの動作の確認
Twitter Cardsの設定が出来ましたら、専用のサイトを利用して動作の確認をします。
1. OGP確認サイトを利用する
2. 公式のCard validatorを利用する
1. OGP確認サイトを利用する
サイトのURLを入力するだけで、Twitter Cardsの設定が出来ているかを確認できるサイトがあります。
Web ToolBoxのOGPチェッカーを利用した場合、サイトにURLを入力すると、設定されているOGPの項目が一覧で表示されます。
2. 公式のCard validatorを利用する
Twitter（X）の公式サイトで公開しているCard validatorを使って、Twitter Cardsの動作の確認もできます。
OGP設定が更新されない場合
キャッシュの影響で、OGP設定を更新しても反映されない場合があります。
SNSでURLを共有すると、各SNSサービスでOGP設定に関するキャッシュが作成され、キャッシュ情報を元に、Twitter Cardsなどのプレビューカードが作成される仕組みです。
OGP設定を更新したい場合は、SNSサービス上のキャッシュを削除するか、キャッシュが削除されるまで放置する必要があります。
公式からのアナウンスによると、Twitter上でのOGP画像のキャッシュは最大7日残ると記載されています。
公式サイト：Card Validator – preview removal
SNSサービス上のキャッシュについて、こちらの記事でも紹介しております。
若い世代や一個人だけでなく、企業や団体でもマーケティングの一貫としてTwitterやFacebook、InstagramなどのSNSを活用しているケースも少なくありません。それぞれの特徴をおさえておけば、事業のマーケティングにおいても大きな力をもつことになるからです。SNSを用いたマーケティングにつ...
Twitter（X）サービス上でのOGP画像の更新方法
以前は、Card Validatorにてキャッシュクリアが可能でしたが、現在はTwitter（X）の仕様変更により、キャッシュのクリアができなくなりました。
現在、公式サイトにてTwitter Cardsのキャッシュをクリアする方法が記載されています。
公式サイト：Refreshing a Card in a Tweet
Twitter Cards内で参照される画像は、URLに基づいてキャッシュされる仕様になるため、
- OGP画像のURLにパラメータを加える
- OGP画像のURLを変更する
などの対策を取ることで、OGP画像が再取得され、反映されやすくなると記載されています。
まとめ
Twitter Cardsの設定方法についてカスタマイズでの設定方法を紹介しました。Twitter Cardsの設定をすることで、視覚的なわかりやすさでユーザーにインパクトを与えられます。SNS上で拡散される場合には、OGP設定と合わせてTwitter Cardsの設定も必須でしょう。
